<template>
<div>
  <el-dialog :visible="visible"  title="患者疼痛量化得分" width="80%" :before-close="handleClose" append-to-body destroy-on-close>
    <div id="printBody">
      <div id="vas" style="height: 400px;width:100%"></div>
      <div id="odi" style="height: 400px;width:100%"></div>
    </div>

    <div slot="footer">
      <el-row>
        <el-button type="primary" v-print="printObj">确认打印</el-button>
      </el-row>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {getPatientOdiAndVasScore} from "@/api/business/patientScore";
import * as echarts from 'echarts';

export default {
  name: "patientScorePdf",
  props: ['visible','patientId','patientName'],
  data(){
    return{
      vasXdata:[],
      vasSdata:[],
      odiXdata:[],
      odiSdata:[],
      //打印对象
      printObj: {
        id: 'printBody', // 要打印的容器的id
        preview: false,// 预览工具是否启用
      }
    }
  },
  created() {
    this.getPatientOdiAndVasScore()
  },
  methods:{
    handleClose(){
      this.$emit("closePdf", false)
    },
    //获取患者历史评分
    getPatientOdiAndVasScore(){
      getPatientOdiAndVasScore(this.patientId).then(response => {
        console.log(response.data.vasList,"vas")
        console.log(response.data.odiList,"odi")
        for (let i = 0; i<response.data.vasList.length; i++){
          const vas = response.data.vasList[i];
          // this.vasXdata.push(this.timeTO(vas.createTime));
          this.vasXdata.push(vas.createTime);
          this.vasSdata.push(vas.vas);
        }
        this.getVasChart()
        for (let i = 0; i<response.data.odiList.length; i++){
          const odi = response.data.odiList[i];
          // this.odiXdata.push(this.timeTO(odi.createTime));
          this.odiXdata.push(odi.createTime);
          this.odiSdata.push(odi.odi);
        }
        this.getOdiChart()
      })
    },
    getVasChart(){
      this.$nextTick(() => {
        const vasChart = echarts.init(document.getElementById('vas'));
        vasChart.setOption({
          title: {
            text: this.patientName+' VAS评分'
          },
          xAxis: {
            data: this.vasXdata
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.vasSdata,
            type: 'line',
            label: {
              show: true
            }
          }]
        })
      })
    },
    timeTO(e){
      const date = new Date(e);
      return date.getFullYear()+'\n'+(date.getMonth()+1)+'\n'+date.getDate()
    },
    getOdiChart(){
      this.$nextTick(() => {
        const vasChart = echarts.init(document.getElementById('odi'));
        vasChart.setOption({
          title: {
            text: this.patientName+' ODI评分'
          },
          xAxis: {
            data: this.odiXdata
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.odiSdata,
            type: 'line',
            label: {
              show: true
            }
          }]
        })
      })
    }
  },
}
</script>

<style scoped lang="scss">
@media print {
  .no-print {
    display: none;
  }

  #odi{
    margin-top: 200px;
  }
}
</style>
